<template>
  <div style="width: 100%; height: 100%">
    <videoPlay ref="videoRef" v-bind="videoOptions" />
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, onMounted, watch } from "vue";
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
import nasFileService from "@/api-services/apis/nasFile";

const props = defineProps({
  app: <any>{},
});

watch(
  () => props.app.data.physicalPath,
  () => {
    initVideo();
  }
);

const emits = defineEmits(["api"]);

const videoOptions = ref({
  width: "100%", //播放器高度
  height: "100%", //播放器高度
  // color: "#409eff", //主题色
  title: "", //视频名称
  src: "",
  // src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
  muted: false, //静音
  // webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: true, //自动播放
  // loop: false, //循环播放
  // mirror: false, //镜像画面
  // ligthOff: false, //关灯模式
  // volume: 0.3, //默认音量大小
  // control: true, //是否显示控制
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    // "pip",
    // "pageFullScreen",
    "fullScreen",
  ], //显示所有按钮,
});

const videoRef = ref(null);

onMounted(() => {
  initVideo();
});

function initVideo() {
  videoOptions.value.src = nasFileService.FileLink(props.app.data.physicalPath);
  videoOptions.value.title = props.app.data.name;
  emits("api", {
    event: "setWindowTitle",
    title: props.app.data.name,
  });
}
</script>

<style lang="scss" scoped></style>
